<template>
  <view class="list">
    <view class="top">
      <search-bar
        :curr-value="form.name"
        @search="search"
      />
      <my-tablist
        :category-list="categoryList"
        default-tab="全部"
        @change="changeTab"
      />
      <view class="line" />
      <sort-menu
        ref="sortmenu"
        @sort="sort"
        @citySearch="citySearch"
      />
    </view>
    <view class="content">
      <my-waterfall
        :list="list"
      />
      <view
        v-if="!list.length"
        class="noResult"
      >
        未匹配到结果，请重新搜索！
      </view>
    </view>
  </view>
</template>

<script>
import searchBar from '@/components/search-bar/index.vue';
import myTablist from '@/components/my-tablist/index.vue';
import myWaterfall from '@/components/my-waterfall/index.vue';
import sortMenu from '@/components/sort-menu/index.vue';

export default {
  components: {
    searchBar,
    myTablist,
    myWaterfall,
    sortMenu
  },
  data() {
    return {
      travelShow: false,
      tripShow: false,
      list: [],
      page: {
        page_size: 10,
        current_page: 1,
        count: 0,
      },
      form: {
        name: '',
        destCity: '',
      },
      filter: {},
      categoryList: [],
      codeList: ''
    };
  },
  onLoad(e) {
    if (e.name) {
      this.form.name = e.name;
    }
    this.queryData();
    this.getCategoryList();
  },
  onReachBottom() {
    if (this.list.length < this.page.count) {
      this.queryData();
    }
  },
  methods: {
    // 列表获取
    queryData(status) {
      uni.showLoading({
        title: '加载中',
				mask:true
      });
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/goods/search',
        data: {
          keywords: this.form.name,
          destCity: this.form.destCity,
          codeList: this.codeList,
          ...this.filter,
          ...this.page,
        },
      }).then((res) => {
        res.data.forEach((t) => {
          t.tagList = t.tag ? JSON.parse(t.tag) : [];
          if (t.price && t.price > 10000) {
            t.price = (t.price / 1000).toString().slice(0, 4) + '万+';
          }
          if (t.sellNumber && t.sellNumber > 10000) {
            t.sellNumber = (t.sellNumber / 1000).toString().slice(0, 4) + '万+';
          }
        });
        if(res.data.length) {
          if(this.page.current_page === 1) {
            res.data.splice(1, 0, {isCustomize: true});
          }
        }else{
					uni.hideLoading()
				}
        this.list.push.apply(this.list, res.data);
        console.log('onReachBottom3');
        this.page.count = res.count;
        this.page.current_page += 1;
        if (status === 'refresh') {
          uni.stopPullDownRefresh();
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },
		search(e) {
      console.log('inputvalue', e);
      this.form.name = e.inputValue;
      this.form.destCity = '';
      this.$refs.sortmenu.reset();
      this.filter = {};
 			this.list = [];
      this.page.current_page = 1;
			this.queryData();
		},
    changeTab(item) {
      // console.log('changeTab', item);
      this.list = [];
      this.page.current_page = 1;
      if(item.code) {
        this.codeList = item.code;
      } else {
        this.codeList = '';
      }
      this.queryData();
    },
    getCategoryList() {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/category/listAll',
      }).then(res => {
        if(res.data) {
          this.categoryList = res.data;
        }
      });
    },
    sort(e) {
      console.log('sort e', e);
      const { type, val } = e;
      if(val) {
        const obj = {
          priceTag: 1,
          sellNumTag: 1
        };
        this.filter = {};
        this.filter[type] = obj[type];
      } else {
        this.filter = {};
        this.filter[type] = 2;
      }
      this.list = [];
      this.page.current_page = 1;
      this.queryData();
    },
    citySearch(e) {
      console.log('cityChange', e);
      this.form.destCity = e;
      this.list = [];
      this.page.current_page = 1;
      this.queryData();
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  min-height: 100vh;
  background: #F7F9FB;

  .top {
    background: #fff;
    padding: 20rpx 30rpx 0;
    margin-bottom: 30rpx;
    position: relative;

    .line {
      border-top: 1rpx solid rgba(0, 0, 0, 0.1);
      position: absolute;
      width: 100vw;
      left: 0;
    }

    .menuList {
      display: flex;
      margin-top: 30upx;
      position: relative;

      .item {
        display: flex;
        // align-items: center;
        margin-right: 10upx;
      }

      .triangle {
        width: 0;
        height: 0;
        border-top: 14upx solid #ccc;
        border-left: 10upx solid transparent;
        border-right: 10upx solid transparent;
        margin: 10upx 14upx 0;

        // transition: all ease .5s;
        &.s {
          border-top: 0;
          border-bottom: 14upx solid #fe7d15;
        }
      }

      .menuSearch {
        position: absolute;
        left: 0;
        top: 40upx;
        background: #fff;
        right: 0;
        padding: 30upx;
        z-index: 99;

        .head {
          display: flex;
          border-bottom: 1px dashed #d1d1d1;
          justify-content: space-between;
          padding-bottom: 16upx;
          margin-bottom: 16upx;
        }

        .btn {
          width: 610upx;
          height: 82upx;
          background: linear-gradient(312deg, #ffc77b 0%, #f78833 100%);
          border-radius: 40px;
          text-align: center;
          line-height: 82upx;
          color: #fff;
          font-size: 32upx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
        }
      }
    }
  }

  .content {
    padding: 0 30rpx;
		overflow: hidden;
    .noResult {
      padding: 118upx 0;
      text-align: center;
    }
  }
}
</style>
